<template>
    <div>
        <a-modal
                v-model="applyModalVisible"
                title="申请/报名"
                :maskClosable="false"
                okText="提交"
                cancelText="关闭"
                :width="700"
                @ok="submitApplyHandler()"
                :confirm-loading="confirmLoading"
        >

            <a-form-model ref="applyForm"
                          :model="form"
                          layout="vertical"
                          :rules="rules">
                <a-spin :spinning="spinning">
                    <a-form-model-item label="姓名" prop="realName">
                        <a-input v-model="form.realName" />
                    </a-form-model-item>
                    <a-form-model-item label="学号/工号"  prop="hnusterId">
                        <a-input v-model="form.hnusterId" />
                    </a-form-model-item>
                    <a-form-model-item label="性别" prop="sex">
                        <a-radio-group v-model="form.sex">
                            <a-radio-button  value="男">
                                男
                            </a-radio-button>
                            <a-radio-button value="女">
                                女
                            </a-radio-button>
                        </a-radio-group>
                    </a-form-model-item>
                    <a-form-model-item label="民族" prop="nation">
                        <a-input v-model="form.nation" />
                    </a-form-model-item>
                    <a-form-model-item label="籍贯" prop="nativePlace">
                        <a-input v-model="form.nativePlace" />
                    </a-form-model-item>
                    <a-form-model-item label="出生日期" prop="birthday">
                        <a-date-picker v-model="form.birthday" :default-value="moment(form.birthday, 'YYYY-MM-DD')" :locale="locale" />
                    </a-form-model-item>
                    <a-form-model-item label="首次申请入党日期" prop="submitPaperDate">
                        <a-date-picker v-model="form.submitPaperDate" :default-value="moment(form.submitPaperDate, 'YYYY-MM-DD')" :locale="locale" />
                    </a-form-model-item>
                    <a-form-model-item
                            label="列为入党积极分子日期(入党积极分子培训填)/参加入党积极分子培训结业时间(发展对象培训填)/入党日期(预备党员培训填)"
                            prop="partyData">
                        <a-date-picker v-model="form.partyData" :default-value="moment('2021-01-01', 'YYYY-MM-DD')" :locale="locale" />
                    </a-form-model-item>
                    <a-form-model-item label="学历" prop="eduBackground">
                        <a-input v-model="form.eduBackground" />
                    </a-form-model-item>
                    <a-form-model-item label="所在班级" prop="classes">
                        <a-input v-model="form.classes" />
                    </a-form-model-item>
                    <a-form-model-item label="联系电话" prop="phone">
                        <a-input v-model="form.phone" />
                    </a-form-model-item>
                    <a-form-model-item label="邮箱">
                        <a-input v-model="form.email" />
                    </a-form-model-item>
                </a-spin>
            </a-form-model>

        </a-modal>
    </div>
</template>

<script>
  import moment from 'moment';
  import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
  import { submitApply, getApplyDetail } from '@/api/apply'
  let formData = {
    applyId: null,
    realName: null,
    semeId: null,
    hnusterId: null,
    sex: null,
    nation: null,
    nativePlace: null,
    birthday: '2000-01-01',
    submitPaperDate: '2021-01-01',
    partyData: null,
    eduBackground: null,
    classes: null,
    phone: null,
    email: null,
  }
  export default {
    name: "ApplyAddOrUpdate",
    data() {
      return {
        spinning: false,
        locale,
        applyModalVisible: false,
        form: Object.assign({}, formData),
        confirmLoading: false,
        rules: {
          realName: [
            { required: true, message: '请输入真实名称', trigger: 'blur' },
          ],
          hnusterId: [
            { required: true, message: '请输入学号/工号', trigger: 'blur' },
          ],
          sex: [
            { required: true, message: '请输入性别', trigger: 'blur' },
          ],
          nation: [
            { required: true, message: '请输入民族', trigger: 'blur' },
          ],
          nativePlace: [
            { required: true, message: '请输入籍贯', trigger: 'blur' },
          ],
          birthday: [
            { required: true, message: '请输入生日', trigger: 'blur' },
          ],
          submitPaperDate: [
            { required: true, message: '', trigger: 'blur' },
          ],
          partyData: [
            { required: true, message: '请输入首次入党时间', trigger: 'blur' },
          ],
          eduBackground: [
            { required: true, message: '请输入学历', trigger: 'blur' },
          ],
          classes: [
            { required: true, message: '请输入班级', trigger: 'blur' },
          ],
          phone: [
            { required: true, message: '请输入手机号码', trigger: 'blur' },
          ],
          email: null,
        }
      }
    },
    methods: {
      moment,
      init (semeId, applyId) {
        this.applyModalVisible = true;
        this.$nextTick(() => {
          this.form = Object.assign({}, formData);
          this.form.semeId = semeId;
          if(applyId !== undefined) {
            this.spinning = true;
            getApplyDetail(applyId).then(res => {
              this.form = res.data;
              this.spinning = false;
            })
          }
        })
      },
      submitApplyHandler() {
         this.$refs['applyForm'].validate(valid => {
           if(valid) {
             submitApply(this.form).then(res => {
               this.confirmLoading = false;
               this.applyModalVisible = false;
               this.$message.success(this.form.applyId == null? '添加成功' : '修改成功');
               this.$emit('reLoadApplyList');
             })
           }
         })
      },
    },
    created() {
    }
  }
</script>


<style scoped>
/deep/ .ant-form-vertical .ant-form-item {
    padding-bottom: 0;
}
/deep/ .ant-form-item {
    margin-bottom: 12px;
}
</style>
